<template>
  <div>
    <!-- 填写的表单 -->
    <el-form ref="myForm" :rules="formRules" label-width="100px" :model="formData">
      <el-form-item label="姓名" prop="username">
        <el-input 
        v-model="formData.username" 
       ></el-input>
      </el-form-item>

      <el-form-item label="性别" prop="sex">
        <el-input 
        v-model="formData.sex" 
       ></el-input>
      </el-form-item>

      <el-form-item label="年龄" prop="age">
        <el-input 
        v-model="formData.age" 
       ></el-input>
      </el-form-item>

      <el-form-item label="学号" prop="code">
        <el-input 
        v-model="formData.code" 
       ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button @click="submit('myForm')" type="primary">提交</el-button>
      </el-form-item>
    </el-form>
    <!-- 展示的表格 -->
    <el-table :data="tableData">
      <el-table-column label="姓名" prop="username">
      </el-table-column>
        <el-table-column label="性别" prop="sex">
      </el-table-column>
        <el-table-column label="年龄" prop="age">
      </el-table-column>
        <el-table-column label="学号" prop="code">
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="{ row }">
          <el-button @click="change({type: 'reset', row})" type="primary">修改</el-button>
          <el-button @click="change({type: 'delet', row})" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  methods: {
    change({ type, row }) {
      if (type === 'reset') {
        // 修改--把row数据传给formData
        // 暴力克隆：值函数，正则；
        this.formData = JSON.parse(JSON.stringify(row));
      } else {
        // 删除--用row去找tableData,找到后就删掉
      }      
    }, 
    submit(formName) {
      this.$refs[formName].validate((valid) => {
          if (valid) {
            const data = JSON.parse(JSON.stringify(this.formData))
            // 先查后插
            const index = this.tableData.findIndex((item) => item.code === data.code);
            
            if (index !== -1) {
              // 找到了就修改 vue里的数组修改不可以使用下标直接赋值
              this.tableData.splice(index, 1, data)
            } else {
              // 找不到就是插入
              this.tableData.push(data)  
            }
                      
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    }
  },
  data() {
    return {
      // 表格数据
      tableData: [{ username: "小明", age: 16, sex: "男", code: 19960308 }],
      // 表单校验
      formRules: {
        username: [
           { required: true, 
            message: '姓名不许为空',
            trigger: 'blur' },
          { min: 2, max: 16,
           message: '长度在 2 到 16 个字符',
            trigger: 'blur' }
        ],
        age: [ { required: true, message: "年龄不许为空", trigger: "blur" } ],
        sex: [ { required: true, message: "性别不许为空", trigger: "blur" } ],
        code: [ { required: true, message: "学号不许为空", trigger: "blur" } ]
      },
      // 表单的数据
      formData: {
        username: "",
        age: "",
        sex: "",
        code: ""
      }
    }
  }
}
</script>